<template>
  <view>
    <view class="nucleic-top">
      <view class="nucleic-price">
        <image :src="list.logo" mode="aspectFill"></image>
        <view class="pay-price">
          <text>{{ list.name }}</text>
          <text>￥{{ list.price }}</text>
        </view>
      </view>
      <view class="nucleic-hint">
        <view v-for="(item,index) in list.boon" :key="index">
          <icon class="icon-small" type="success" size="15"></icon>
          <text>{{ item }}</text>
        </view>
      </view>
    </view>
    <!-- 地址 -->
    <view class="nucleic-address">
      <view>
        <text>{{ list.hospital }}</text>
        <text class="text-color">{{ list.address }}
        </text>
      </view>
      <view @click="phone">
        <image src="/static/other/dianhua.svg" mode="widthFix"></image>
        <text class="text-color">电话</text>
      </view>
    </view>
    <!-- 表单 -->
    <view class="xinguan-view new-style">
      <view class="xinguan-flex">
        <text>真实姓名</text>
        <input placeholder="请输入真实姓名" v-model="obj.name" placeholder-class="input-style"/>
      </view>
      <view class="xinguan-flex">
        <text>手机号</text>
        <input placeholder="请输入手机号" type="number" v-model="obj.phone" placeholder-class="input-style"/>
      </view>
      <view class="xinguan-flex">
        <text>身份证</text>
        <input placeholder="请输入身份证" v-model="obj.id_card" placeholder-class="input-style"/>
      </view>
    </view>
    <!-- 预约时段 -->
    <view class="nucleic-time">
      <text class="nucleic-Title">选择预约时段</text>
      <scroll-view scroll-x="true" class="scroll-view_H">
        <view class="nucleic-time-flex">
          <view v-for="(item,index) in list.date" :key="index" :class="index===key?'checkstyle':''"
                @click="add(index)">
            <text>{{ item.date }}</text>
            <text>{{ item.week }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 采样方式 -->
    <view class="nucleic-time">
      <text class="sam-Title">咽拭子采样方式</text>
      <view class="sam-content" v-for="(item,index) in list.style" :key="index">
        <label>{{ item.title }}</label>
        <text>{{ item.desc }}</text>
      </view>
    </view>
    <!-- 提交 -->
    <view style="height:300rpx"></view>
    <view class="Total-view">
      <text>检测费用：￥{{ list.price }}</text>
      <text @click="submit">提交</text>
    </view>
  </view>
</template>

<script>
import {
  nuataget,
  resnuata
} from "../../utils/API/homeapi"
export default {
  data() {
    return {
      list: [],
      key: -1,
      obj: {
        name: '',
        phone: '',
        id_card: '',
        time: ''
      }
    };
  },
  mounted() {
    this.xuan()
  },
  methods: {
    async xuan() {
      let {
        data
      } = await nuataget()
      this.list = data[0]
      console.log(this.list)
    },
    //提交
    async submit() {
      console.log(this.obj)
      let data = await resnuata(this.obj)
      console.log(data)
      if (data.msg === "提交成功") {
        wx.showToast({
          title: data.msg,
          icon: 'success',
          duration: 2000
        })
        wx.navigateTo({
          url: '/pages/nuataorder/nuataorder'
        })
      } else {
        wx.showToast({
          title: data.msg,
          icon: 'error',
          duration: 2000
        })
      }

    },
    //获取时间
    add(index) {
      this.key = index
      this.obj.time = this.list.date[index].date
    },
    //拨打电话
    phone() {
      wx.makePhoneCall({
        phoneNumber: '13666666666', //仅为示例，并非真实的电话号码
        success(res) {
          console.log(res)
        },
        fail(err){
          console.log(err)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 表单提交 */
@import url('../../static/common-style/form.css');
@import url('../../static/common-style/nucleic-time.css');

page {
  background-color: #fafafa;
}

.nucleic-top {
  background-color: #ffffff;
  padding: 20rpx;
}

.nucleic-price {
  display: flex;
  align-items: center;
}

.nucleic-price image {
  width: 100rpx;
  height: 100rpx;
  display: block;
}

.nucleic-price text {
  display: block;
  padding: 10rpx;
}

.pay-price text:nth-child(1) {
  font-size: 35rpx;
}

.pay-price text:nth-child(2) {
  font-weight: bold;
  color: #ff5f2c;
}

/* 提示 */
.nucleic-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20rpx;
  font-size: 24rpx;
}

.nucleic-hint view {
  display: flex;
  align-items: center;
}

.nucleic-hint text {
  padding-left: 10rpx;
}

/* 地址 */
.nucleic-address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 20rpx;
}

.nucleic-address text {
  display: block;
}

.nucleic-address image {
  width: 40rpx;
  height: 40rpx;
}

.nucleic-address view:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-color {
  font-size: 25rpx;
  padding-top: 20rpx;
}

/* 个人信息 */
.new-style {
  margin: 20rpx;
  border-radius: 20rpx;
}

/* 采样 */
.sam-Title {
  font-weight: bold;
}

.sam-content {
  margin-top: 20rpx;
}

.sam-content label {
  background-color: #0176ff;
  color: #ffffff;
  border-radius: 10rpx;
  padding: 5rpx 10rpx;
  font-size: 28rpx;
  display: inline-block;
}

.sam-content text {
  display: block;
  padding: 10rpx 0;
  line-height: 1.5;
  font-size: 28rpx;
}

/* 选中加上样式 */
.checkstyle {
  background-color: #2c76ef !important;
  color: #ffffff !important;
}
</style>
